﻿@model SarahShop.Models.Product
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
    <link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500' rel='stylesheet' type='text/css'>
    <link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="~/Content/js/jquery.min.js" type="text/javascript"></script>
    <!-- start details -->
    <link rel="stylesheet" type="text/css" href="~/Content/css/productviewgallery.css" media="all" />
    <script type="text/javascript" src="~/Content/js/cloud-zoom.1.0.3.min.js"></script>
    <script type="text/javascript" src="~/Content/js/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="~/Content/js/productviewgallery.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>

<div class="top_bg">
    <div class="wrap">
        <div class="main_top">
            <h2 class="style">Chi tiết sản phẩm</h2>
        </div>
    </div>
</div>
<!-- start main -->
<div class="main_bg">
    <div class="wrap">
        <div class="main">
            <!-- start content -->
            <div class="single">
                <!-- start span1_of_1 -->
                <div class="left_content">
                    <div class="span1_of_1">
                        <!-- start product_slider -->
                        <div class="product-view">
                            <div class="product-essential">
                                <div class="product-img-box">
                                    <div class="product-image">
                                        <a class="cs-fancybox-thumbs cloud-zoom" rel="adjustX:30,adjustY:0,position:'right',tint:'#202020',tintOpacity:0.5,smoothMove:2,showTitle:true,titleOpacity:0.5" data-fancybox-group="thumb" href="../../Content/images/source/@Model.Image" title="Women Shorts" alt="Women Shorts">
                                            <img src="../../Content/images/source/@Model.Image" alt="Women Shorts" title="Women Shorts" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end product_slider -->
                    </div>
                    <!-- start span1_of_1 -->
                    <div class="span1_of_1_des">
                        <div class="desc1">
                            <h3>@Model.Name</h3>
                            <h5>@Model.Code  $ @Model.Price.ToString("N0")</h5>
                            <div class="available">
                                <div class="btn_form">
                                </div>
                                <span><a href="#">Giới thiệu</a></span>
                                <p>@Model.Des</p>
                            </div>
                            <div class="share-desc">
                                <div class="share">
                                    <h4>Share Product :</h4>
                                    <ul class="share_nav">
                                        <li><a href="#">
                                            <img src="~/Content/images/facebook.png" title="facebook"></a></li>
                                        <li><a href="#">
                                            <img src="~/Content/images/twitter.png" title="Twiiter"></a></li>
                                        <li><a href="#">
                                            <img src="~/Content/images/rss.png" title="Rss"></a></li>
                                        <li><a href="#">
                                            <img src="~/Content/images/gpluse.png" title="Google+"></a></li>
                                    </ul>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <!-- start left content_bottom -->
                    <div class="left_content_btm">
                        <p class="para">
                            1. Trường hợp quý khách có thể có thể đổi trả sản phẩm <br />
                                - Sai lệch so với đơn đặt hàng: không đúng chủng loại, mẫu mã hoặc không đủ số lượng như quý khách đã đặt hàng.<br />
                                - Sai lệch thông tin với thông tin bên ngoài bao bì.<br />
                            2. Trường hợp không được đổi trả sản phẩm<br />
                                - Mặt hàng không đúng mẫu mã, không phải hàng của SarahShop.<br />
                                - Sản phẩm đã sử dụng<br />
                        </p>
                        <!-- start tabs -->
                        <section class="tabs">
                            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked">
                            <label for="tab-1" class="tab-label-1">Đặc điểm</label>

                            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2">
                            <label for="tab-2" class="tab-label-2">Đặt hàng</label>

                            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3">
                            <label for="tab-3" class="tab-label-3">Giao hàng</label>

                            <div class="clear-shadow"></div>

                            <div class="content">
                                <div class="content-1">
                                    <p class="para top"><span>@Model.Code</span> @Model.Des</p>
                                    <ul>
                                        <li>Giá : @Model.Price.ToString("N0");</li>
                                        <li>Size : @Model.Size</li>
                                        <li>Lưu ý sử dụng: @Model.UserNote</li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                                <div class="content-2">
                                    <p class="para"><span>Đăt hàng </span>Để đặt hàng, quí khách vui lòng liên hệ qua số điện thoại của công ty.</p>
                                    <ul class="qua_nav">
                                        <li>Công ty: @SarahShop.Until.COMPANY_NAME</li>
                                        <li>Địa chỉ: @SarahShop.Until.COMPANY_ADDRESS</li>
                                        <li>Điện thoại: @SarahShop.Until.COMPANY_PHONE</li>
                                        <li>Fax: @SarahShop.Until.COMPANY_FAX</li>
                                        <li>Email: @SarahShop.Until.COMPANY_EMAIL</li>
                                    </ul>
                                </div>
                                <div class="content-3">
                                    <p class="para top"><span>Giao hàng</span> Để việc giao hàng được thuận lợi, quí khách vui lòng cung cấp chính xác địa điểm, sdt. Để nhân viên giao hàng dễ dàng liên hệ</p>
                                    <p class="para top"><span>Miễn phí giao hàng các quận sau:</span></p>                                    
                                    <ul>
                                        <li>Tân Bình</li>
                                        <li>Tân Phú</li>
                                        <li>Gò Vấp</li>
                                        <li>Bình Thạnh</li>
                                    </ul>
                                    <p class="para top"><span>Cước phí vận chuyển cho các quận còn lại:</span></p>
                                    <ul>
                                        <li>Quận 1: 10.000</li>
                                        <li>Quận 2: 20.000</li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                            </div>
                        </section>
                        <!-- end tabs -->
                    </div>
                    <!-- end left content_bottom -->
                </div>
                <!-- start left_sidebar -->
                <div class="left_sidebar">
                    <ul class="det_nav">
                        <li><a href="#">Khuyến mãi</a></li>
                        <li><a href="#">Mẫu mới</a></li>
                        <li><a href="#">Mua nhiều nhất</a></li>
                        <li><a href="#">Giao hàng tận nơi</a></li>
                        <li><a href="#">Đổi trả hàng</a></li>
                        <li><a href="#">Đóng góp</a></li>
                    </ul>
                    <h4>Mẫu quần khác</h4>
                    @for(int i = 0; i < 3; i++)
                    {
                        <div class="left_products">
                            <div class="left_img">
                                <img src="~/Content/images/source/@ViewBag.randomProduct[i].Image" alt="" width="80" height="100"/>
                            </div>
                            <div class="left_text">
                                <p><a href="~/Views/Home/Details?pCode=@ViewBag.randomProduct[i].Code">@ViewBag.randomProduct[i].Code</a></p>
                                <span>$@ViewBag.randomProduct[i].Price.ToString("N0");</span>
                            </div>
                            <div class="clear"></div>
                        </div>
                    }
                    <h4>Chọn màu</h4>
                    <ul class="color-list">
                        <li><a href="#"><span class="color2"></span>
                            <p class="red">Green</p>
                        </a></li>
                        <li><a href="#"><span class="color3"></span>
                            <p class="red">Blue</p>
                        </a></li>
                        <li><a href="#"><span class="color4"></span>
                            <p class="red">Yellow</p>
                        </a></li>
                        <li><a href="#"><span class="color5"></span>
                            <p class="red">Violet</p>
                        </a></li>
                        <li><a href="#"><span class="color6"></span>
                            <p class="red">Orange</p>
                        </a></li>
                        <li><a href="#"><span class="color7"></span>
                            <p class="red">Gray</p>
                        </a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <!-- end content -->
        </div>
    </div>
</div>
